<html>
<head>
<title>The X Toolkit API</title>
<link href="doc.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('visualization', '1', {packages: ['orgchart']});
</script>
<script type="text/javascript">

  // don't show internals by default
  var displayInternals = false;

  var toggleInternals = function() {
    
    // toggle the display variable
    displayInternals = !displayInternals;

    if (!document.styleSheets)
      return;
    var thecss = new Array();
    
    if (document.styleSheets[0].cssRules) thecss = document.styleSheets[0].cssRules;
    else thecss = document.styleSheets[0].rules;
    
    for (i = 0; i < thecss.length; i++) {
      
      if (thecss[i].selectorText.toLowerCase() == '.private') {
        
        if (displayInternals) {
          thecss[i].style.cssText += "display: block;";
          document.getElementById('togglBtn').innerHTML = 'Hide Internals'
        } else {
          thecss[i].style.cssText += "display: none;";
          document.getElementById('togglBtn').innerHTML = 'Show Internals'
        }
      
      } else if (thecss[i].selectorText.toLowerCase() == '.private_quicklink') {
        
        if (displayInternals) {
          thecss[i].style.cssText += "display: inline;";
        } else {
          thecss[i].style.cssText += "display: none;";
        }
        
      }
       
    }
    
  }
  
  function drawVisualization() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
      [{v:"goog.events.EventTarget",f:"<font color=green>goog.events.EventTarget</font>"},null,null],
["X.base","goog.events.EventTarget",null],
["X.camera","X.base",null],

    ]);
  
    // Create and draw the visualization.
    new google.visualization.OrgChart(document.getElementById('diagram')).
        draw(data, {allowHtml: true, size:'small', color:'#f3f3f3'});
  }
  

  google.setOnLoadCallback(drawVisualization);  
  
</script>
</head>

<body>
	<h1>The X Toolkit API</h1>
	<div class="menu"><b>X</b><br><span class="menuitem"><a href="counter.html">X.counter</a></span><br><br><b>CORE</b><br><span class="menuitem"><a href="base.html">X.base</a></span><br><span class="menuitem"><a href="colortable.html">X.colortable</a></span><br><span class="menuitem"><a href="event.html">X.event</a></span><br><span class="menuitem"><a href="file.html">X.file</a></span><br><span class="menuitem"><a href="HoverEndEvent.html">X.HoverEndEvent</a></span><br><span class="menuitem"><a href="HoverEvent.html">X.HoverEvent</a></span><br><span class="menuitem"><a href="ModifiedEvent.html">X.ModifiedEvent</a></span><br><span class="menuitem"><a href="PanEvent.html">X.PanEvent</a></span><br><span class="menuitem"><a href="ProgressEvent.html">X.ProgressEvent</a></span><br><span class="menuitem"><a href="RenderEvent.html">X.RenderEvent</a></span><br><span class="menuitem"><a href="ResetViewEvent.html">X.ResetViewEvent</a></span><br><span class="menuitem"><a href="RotateEvent.html">X.RotateEvent</a></span><br><span class="menuitem"><a href="scalars.html">X.scalars</a></span><br><span class="menuitem"><a href="ScrollEvent.html">X.ScrollEvent</a></span><br><span class="menuitem"><a href="texture.html">X.texture</a></span><br><span class="menuitem"><a href="transform.html">X.transform</a></span><br><span class="menuitem"><a href="triplets.html">X.triplets</a></span><br><span class="menuitem"><a href="WindowLevelEvent.html">X.WindowLevelEvent</a></span><br><span class="menuitem"><a href="ZoomEvent.html">X.ZoomEvent</a></span><br><br><b>INJECTS</b><br><span class="menuitem"><a href="constructable.html">X.constructable</a></span><br><span class="menuitem"><a href="displayable.html">X.displayable</a></span><br><span class="menuitem"><a href="loadable.html">X.loadable</a></span><br><span class="menuitem"><a href="thresholdable.html">X.thresholdable</a></span><br><br><b>IO</b><br><span class="menuitem"><a href="interactor.html">X.interactor</a></span><br><span class="menuitem"><a href="interactor2D.html">X.interactor2D</a></span><br><span class="menuitem"><a href="interactor3D.html">X.interactor3D</a></span><br><span class="menuitem"><a href="loader.html">X.loader</a></span><br><span class="menuitem"><a href="parser.html">X.parser</a></span><br><span class="menuitem"><a href="parserCRV.html">X.parserCRV</a></span><br><span class="menuitem"><a href="parserDCM.html">X.parserDCM</a></span><br><span class="menuitem"><a href="parserFSM.html">X.parserFSM</a></span><br><span class="menuitem"><a href="parserIMAGE.html">X.parserIMAGE</a></span><br><span class="menuitem"><a href="parserLBL.html">X.parserLBL</a></span><br><span class="menuitem"><a href="parserLUT.html">X.parserLUT</a></span><br><span class="menuitem"><a href="parserMGZ.html">X.parserMGZ</a></span><br><span class="menuitem"><a href="parserNII.html">X.parserNII</a></span><br><span class="menuitem"><a href="parserNRRD.html">X.parserNRRD</a></span><br><span class="menuitem"><a href="parserOBJ.html">X.parserOBJ</a></span><br><span class="menuitem"><a href="parserSTL.html">X.parserSTL</a></span><br><span class="menuitem"><a href="parserTRK.html">X.parserTRK</a></span><br><span class="menuitem"><a href="parserVTK.html">X.parserVTK</a></span><br><br><b>MATH</b><br><span class="menuitem"><a href="array.html">X.array</a></span><br><span class="menuitem"><a href="matrix.html">X.matrix</a></span><br><span class="menuitem"><a href="vector.html">X.vector</a></span><br><br><b>OBJECTS</b><br><span class="menuitem"><a href="cube.html">X.cube</a></span><br><span class="menuitem"><a href="cylinder.html">X.cylinder</a></span><br><span class="menuitem"><a href="fibers.html">X.fibers</a></span><br><span class="menuitem"><a href="labelmap.html">X.labelmap</a></span><br><span class="menuitem"><a href="mesh.html">X.mesh</a></span><br><span class="menuitem"><a href="object.html">X.object</a></span><br><span class="menuitem"><a href="slice.html">X.slice</a></span><br><span class="menuitem"><a href="sphere.html">X.sphere</a></span><br><span class="menuitem"><a href="volume.html">X.volume</a></span><br><br><b>UI</b><br><span class="menuitem"><a href="caption.html">X.caption</a></span><br><span class="menuitem"><a href="progressbar.html">X.progressbar</a></span><br><br><b>VISUALIZATION</b><br><span class="menuitem"><a href="buffer.html">X.buffer</a></span><br><span class="menuitem"><a href="camera.html">X.camera</a></span><br><span class="menuitem"><a href="camera2D.html">X.camera2D</a></span><br><span class="menuitem"><a href="camera3D.html">X.camera3D</a></span><br><span class="menuitem"><a href="indexer.html">X.indexer</a></span><br><span class="menuitem"><a href="renderer.html">X.renderer</a></span><br><span class="menuitem"><a href="renderer2D.html">X.renderer2D</a></span><br><span class="menuitem"><a href="renderer3D.html">X.renderer3D</a></span><br><span class="menuitem"><a href="shaders.html">X.shaders</a></span><br><br></div>
	<div id="diagram"></div>
	<div class="content">
		<h2>X.camera</h2>
		<div class="public" id="camera">
<pre>/**
* Create a camera.
*
* @constructor
* @param {number} width The width of the camera's viewport.
* @param {number} height The height of the camera's viewport.
* @extends <a href="base.html">X.base</a>
*/</pre>
<span class="code">var c = new <span class="identifier">X.camera()</span>;</span><br></div><div class="private" id="_classname">
<pre>/**
* The className of this class.
*
* @type {string}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_classname</span> = $_CLASSNAME;</span><br></div><div class="private" id="_dirty">
<pre>/**
* The 'dirty' flag of this object.
*
* @type {boolean}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_dirty</span> = $_DIRTY;</span><br></div><div class="private" id="_focus">
<pre>/**
* The focus point of this camera, by default 0, 0, 0.
*
* @type {!<a href="vector.html">X.vector</a>}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_focus</span> = $_FOCUS;</span><br></div><div class="private" id="_id">
<pre>/**
* The uniqueId of this instance. Each class instance in XTK has a uniqueId.
*
* @type {number}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_id</span> = $_ID;</span><br></div><div class="private" id="_position">
<pre>/**
* The position of this camera, by default 0, 0, 100.
*
* @type {!<a href="vector.html">X.vector</a>}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_position</span> = $_POSITION;</span><br></div><div class="private" id="_up">
<pre>/**
* The unit vector pointing to the top of the three-dimensional space.
*
* @type {!<a href="vector.html">X.vector</a>}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_up</span> = $_UP;</span><br></div><div class="private" id="_view">
<pre>/**
* The view matrix.
*
* @type {!Float32Array}
* @protected
*/</pre>
<span class="code">c.<span class="identifier">_view</span> = $_VIEW;</span><br></div><div class="public" id="classname_get">
<pre>/**
* Get the className of this object.
*
* @return {string} The className of this object.
* @public
*/</pre>
<span class="code">var _classname = c.<span class="identifier">classname</span>;</span><br></div><div class="public" id="focus_get">
<pre>/**
* Get the focus (target point) of this camera.
*
* @return {!Array} The focus as an array [X,Y,Z].
*/</pre>
<span class="code">var _focus = c.<span class="identifier">focus</span>;</span><br></div><div class="public" id="focus_set">
<pre>/**
* Set the focus (target point) of this camera. This forces a re-calculation of
* the view matrix. This action _does not_ force an immediate render event
* automatically.
*
* @param {!Array} focus The X,Y,Z components of the focus as an array.
* @throws {Error} An error, if the focus was invalid.
* @public
*/</pre>
<span class="code">c.<span class="identifier">focus</span> = $FOCUS;</span><br></div><div class="public" id="id_get">
<pre>/**
* Get the id of this instance.
*
* @return {string} The className of this object.
* @public
*/</pre>
<span class="code">var _id = c.<span class="identifier">id</span>;</span><br></div><div class="public" id="position_get">
<pre>/**
* Get the position of this camera.
*
* @return {!Array} The position as an array [X,Y,Z].
*/</pre>
<span class="code">var _position = c.<span class="identifier">position</span>;</span><br></div><div class="public" id="position_set">
<pre>/**
* Set the position of this camera. This forces a re-calculation of the view
* matrix. This action _does not_ force an immediate render event automatically.
*
* @param {!Array} position The X,Y,Z components of the position as an array.
* @throws {Error} An error, if the position was invalid.
* @public
*/</pre>
<span class="code">c.<span class="identifier">position</span> = $POSITION;</span><br></div><div class="public" id="up_get">
<pre>/**
* Get the up-vector of this camera.
*
* @return {!Array} The up-vector as an array [X,Y,Z].
*/</pre>
<span class="code">var _up = c.<span class="identifier">up</span>;</span><br></div><div class="public" id="up_set">
<pre>/**
* Set the up-vector of this camera. This forces a re-calculation of the view
* matrix. This action _does not_ force an immediate render event automatically.
*
* @param {!Array} up The up vector as an array.
* @throws {Error} An error, if the up vector was invalid.
* @public
*/</pre>
<span class="code">c.<span class="identifier">up</span> = $UP;</span><br></div><div class="public" id="view_get">
<pre>/**
* Get the view matrix for the three-dimensional space.
*
* @return {!Float32Array} The view matrix.
*/</pre>
<span class="code">var _view = c.<span class="identifier">view</span>;</span><br></div><div class="public" id="view_set">
<pre>/**
* Set the view matrix for the three-dimensional space.
*
* @param {!Float32Array} view The view matrix.
* @throws {Error} An exception if the view matrix is invalid.
* @public
*/</pre>
<span class="code">c.<span class="identifier">view</span> = $VIEW;</span><br></div><div class="private" id="lookAt_">
<pre>/**
* Calculate a view matrix by using the camera position and a focus point.
*
* @param {!<a href="vector.html">X.vector</a>} cameraPosition The camera position.
* @param {!<a href="vector.html">X.vector</a>} targetPoint The focus (target) point.
* @return {!Float32Array} The view matrix.
* @throws {Error} If the given arguments are invalid.
* @protected
*/</pre>
<span class="code">var lookAt_ = c.<span class="identifier">lookAt_</span>($CAMERAPOSITION, $TARGETPOINT);</span><br></div><div class="private" id="observe">
<pre>/**
* Configures observers for a given interactor. The method sets up listeners for
* PAN and ZOOM events.
*
* @param {!<a href="interactor.html">X.interactor</a>} interactor The interactor which should be observed.
*/</pre>
<span class="code">c.<span class="identifier">observe</span>($INTERACTOR);</span><br></div><div class="private" id="onPan_">
<pre>/**
* The callback for a PAN event.
*
* @param {!<a href="event.html">X.event</a>.PanEvent} event The event.
* @throws {Error} An exception if the event is invalid.
* @protected
*/</pre>
<span class="code">c.<span class="identifier">onPan_</span>($EVENT);</span><br></div><div class="private" id="onRotate_">
<pre>/**
* The callback for a ROTATE event.
*
* @param {!<a href="event.html">X.event</a>.RotateEvent} event The event.
* @throws {Error} An exception if the event is invalid.
* @protected
*/</pre>
<span class="code">c.<span class="identifier">onRotate_</span>($EVENT);</span><br></div><div class="private" id="onZoom_">
<pre>/**
* The callback for a ZOOM event.
*
* @param {!<a href="event.html">X.event</a>.ZoomEvent} event The event.
* @throws {Error} An exception if the event is invalid.
* @protected
*/</pre>
<span class="code">c.<span class="identifier">onZoom_</span>($EVENT);</span><br></div><div class="public" id="pan">
<pre>/**
* Perform a pan operation.
*
* @param {!<a href="vector.html">X.vector</a>|!Array} distance The distance of the panning in respect of
*          the last camera position.
* @public
*/</pre>
<span class="code">c.<span class="identifier">pan</span>($DISTANCE);</span><br></div><div class="private" id="reset">
<pre>/**
* Reset the camera according to its configured position and focus.
*/</pre>
<span class="code">c.<span class="identifier">reset</span>();</span><br></div><div class="public" id="rotate">
<pre>/**
* Perform a rotate operation.
*
* @param {!<a href="vector.html">X.vector</a>|!Array} distance The distance of the rotation in
*          respect of the last camera position as either a 2D Array or a
*          <a href="vector.html">X.vector</a> containing the X and Y distances for the rotation.
* @public
*/</pre>
<span class="code">c.<span class="identifier">rotate</span>($DISTANCE);</span><br></div><div class="public" id="zoomIn">
<pre>/**
* Perform a zoom in operation.
*
* @param {boolean} fast Enables/disables the fast mode which zooms much
*          quicker.
* @public
*/</pre>
<span class="code">c.<span class="identifier">zoomIn</span>($FAST);</span><br></div><div class="public" id="zoomOut">
<pre>/**
* Perform a zoom out operation.
*
* @param {boolean} fast Enables/disables the fast mode which zooms much
*          quicker.
* @public
*/</pre>
<span class="code">c.<span class="identifier">zoomOut</span>($FAST);</span><br></div>
	</div>

  <div id="toolbox">
  <center><button id="togglBtn" type="button" onclick="javascript:toggleInternals();">Show Internals</button></center><br><br>
  <b>CONSTRUCTORS</b><br>
  <span class="public_quicklink"><a href="#camera">X.camera</a><br></span><br>
  <b>PROPERTIES</b><br>
  <span class="private_quicklink"><a href="#_classname">_classname</a><br></span><span class="private_quicklink"><a href="#_dirty">_dirty</a><br></span><span class="private_quicklink"><a href="#_focus">_focus</a><br></span><span class="private_quicklink"><a href="#_id">_id</a><br></span><span class="private_quicklink"><a href="#_position">_position</a><br></span><span class="private_quicklink"><a href="#_up">_up</a><br></span><span class="private_quicklink"><a href="#_view">_view</a><br></span><br>
  <b>GETTERS/SETTERS</b><br>
  <span class="public_quicklink"><a href="#classname_get">classname</a><br></span><span class="public_quicklink"><a href="#focus_get">focus</a><br></span><span class="public_quicklink"><a href="#id_get">id</a><br></span><span class="public_quicklink"><a href="#position_get">position</a><br></span><span class="public_quicklink"><a href="#up_get">up</a><br></span><span class="public_quicklink"><a href="#view_get">view</a><br></span><br>
  <b>FUNCTIONS</b><br>
  <span class="private_quicklink"><a href="#lookAt_">lookAt_</a><br></span><span class="private_quicklink"><a href="#observe">observe</a><br></span><span class="private_quicklink"><a href="#onPan_">onPan_</a><br></span><span class="private_quicklink"><a href="#onRotate_">onRotate_</a><br></span><span class="private_quicklink"><a href="#onZoom_">onZoom_</a><br></span><span class="public_quicklink"><a href="#pan">pan</a><br></span><span class="private_quicklink"><a href="#reset">reset</a><br></span><span class="public_quicklink"><a href="#rotate">rotate</a><br></span><span class="public_quicklink"><a href="#zoomIn">zoomIn</a><br></span><span class="public_quicklink"><a href="#zoomOut">zoomOut</a><br></span><br>
  <b>STATIC</b><br>
  <br><br><br>
  <center><small><a href="https://github.com/xtk/X/blob/master/visualization/camera.js" target="_blank">SOURCECODE</a><br></small></center>
  </div>	
	
	<br><br><br>
</body>

</html>